<template>
  <page-state-view :view-ready="viewReady">
    <div class="full~ p-10px box-border bg-gray-200 flex flex-col">
      <div class="flex-none p-10px box-border bg-light-50 rounded flex">
        <div class="image~ h-200px w-200px mr-10px" :style="{backgroundImage: `url(${project?.projectCover})`}">
        </div>
        <project-info-table :name="project?.projectName" :desc="project?.projectDesc"/>
      </div>
      <div class="flex-1 mt-10px p-10px box-border bg-light-50 rounded flex flex-col">
        <div class="flex-none border-b border-gray-200 between~ pb-10px">
          <div class="text-base p-5px box-border">项目需求</div>
          <div class="text-sm p-5px box-border bg-blue-600 text-light-50 rounded cursor-pointer"
               @click="toDemand">
            创建项目需求
          </div>
        </div>
        <div class="flex-1">
          <div class="full~ center~" v-if="demandList === null || demandList.length === 0">
            <no-content size="150"/>
          </div>
        </div>
      </div>
    </div>
  </page-state-view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useGet} from "@/hooks";
import {useRoute} from "vue-router";
import {DemandItem, ProjectItem} from "@/pages/project/type";
import router from "@/router";
import PageStateView from "@/components/viewComponents/PageStateView.vue";
import ProjectInfoTable from "@/pages/project/components/ProjectInfoTable.vue";
import NoContent from "@/components/viewComponents/NoContent.vue";

const route = useRoute()
const viewReady = ref(true)
const projectId = route.query.id
const project = ref<ProjectItem>({
  projectName: "",
  projectDesc: "",
  projectCover: "",
  projectId: 0
})
const demandList = ref<DemandItem[]>([])

onMounted(() => {
  useGet({
    url: `/v1/project/item/${projectId}`,
    params: {},
    success: (data) => {
      project.value = data
    },
    fail: (message) => {
      console.log(message)
    }
  }, true)
  useGet({
    url: `/v1/demand/project/${projectId}`,
    params: {},
    success: (data) => {
      demandList.value = data.list
    },
    fail: (message) => {
      console.log(message)
    }
  }, true)
})

function toDemand() {
  router.push({name: "projectDemand", query: {projectId: projectId}})
}
</script>

<style scoped>

</style>